<template>
  <div class="d-flex justify-content-center align-items-center bg" style="height: 100vh">

      <div class="container">
        <div style="display: flex;justify-content: center;align-items: center;margin-bottom: 20px" class="changec">
          <span>在吉大学生就业心态调查问卷</span>
        </div>
        <div class="title-info">
          <ul>
              <li>组织单位：吉林日报社（吉林日报报业集团）</li>
              <li>调查对象：全省高校2025、2026届毕业生</li>
              <li>调查内容：就业基础信息、就业意向、就业环境等</li>
              <li>调查时间：204年9-10月</li>
          </ul>

        </div>

    
<div class="d-flex justify-content-center align-items-center" style="margin-top: 40px;"><button type="button" class="btn btn-primary" @click="goToHome()">参与调查</button></div>

      </div>
      
  </div>
</template>
<script>
  import service from '@/utils/request';
  import $tools from '@/assets/tools.js'
import { reactive, onMounted } from 'vue'
  const _data = reactive({
    // 分享标题、描述、图标等数据(根据您的需求自定义即可)
    info: {
        title: '原来还可以这样玩？ - CSDN',
        desc: '这一篇来自于2022年的文章,有着悠久的历史...',
        cover: 'https://img-blog.csdnimg.cn/c2a96b6ed7444a43a55c9eb16399604c.png',
        // ...
    }
})
const getConfig = () => {
    // 请自行替换接口请求方式与地址！！
    axios(`XXXX`).then(res => {
        // console.log('配置信息', res.data)
        // 1: 注入并验证信息
        $tools.config(res.data)
        // 2: 调用分享功能
        setShare()
    })
}
const setShare = () => {
    // 分享标题、描述、图标等数据(根据您的需求自定义即可)
    const data = _data.info;
    // "分享给朋友/分享到QQ"
    const appMessage = {
        title: data.title, //分享标题
        desc: data.desc, //分享描述
        link: location.href, //分享链接,默认当前页面(必须对应JS安全域名)
        imgUrl: data.cover, //分享图标
        success: () => {//调用成功
            // alert('成功')
        },
        fail: (err) => {//调用失败
            alert(JSON.stringify(err))
        }
    }
    // "分享到朋友圈/分享到QQ空间"
    const timeLine = {
        title: data.title, //分享标题
        link: location.href, //分享链接,默认当前页面(必须对应JS安全域名)
        imgUrl: data.cover, //分享图标
        success: () => {//调用成功
            // alert('成功')
        },
        fail: (err) => {//调用失败
            alert(JSON.stringify(err))
        }
    }
    // 丢入自动设置
    $tools.wxShare(appMessage, timeLine)
}
onMounted(() => {
    // 一键开启页面分享功能
    getConfig()
})
export default {
  name: 'Loginview',
  data() {
      return {
        form: {
                  nickname: '',
                  headimgurl: ''
              },
          username: '',
          password: '',
          imgsrc:'',
          username:'',
          openId:''
      }
  },

  mounted() {
    document.title = '调查问卷';
  
  },
      created(){

        this.login()
      },
  methods: {
    getUrlCode(variable) {
              var query = window.location.search.substring(1);
              var vars = query.split("&");
              for (var i = 0; i < vars.length; i++) {
                  var pair = vars[i].split("=");
                  if (pair[0] == variable) {
                      return pair[1];
                  }
              }
              return (false);
          },
          async login() {

           let    userInfo = localStorage.getItem("userinfo")
              console.log(userInfo)

                  if(userInfo===null)
                  {
                    let code = this.getUrlCode('code')
                  console.log(code)
                  if (code) {
                    service.post('/prod-api/system/api/client/login?code='+code).then(response => {         
                    if(response.code==200)
                    {
                      this.imgsrc=response.data.userInfo.avatar
                      this.openId=response.data.userInfo.openId
                      console.log(this.imgsrc)
                      localStorage.setItem('userinfo',JSON.stringify(response.data.userInfo));
                    }
                console.log(response)
            }).catch(function (error) {
                console.log(error);
            });          
                      //授权登录
       console.log(code)
                  } else {
                      // code 不存在，走微信网页授权逻辑 
                      // 当前网页的url，供微信重定向使用 
                      let loc_href = encodeURIComponent(window.location.href);
                     // let loc_href='http://10.0.72.107:15080/system/api/client/login'
                      // this.$config.weChat.appID 为微信公众号的appid 
                      let appid='wx77a68f988e228ebd'
                      let wxUrl =
                          `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect\_uri=${loc_href}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
                    console.log(wxUrl)
                      // 跳转链接获取code 
                      location.href = wxUrl
                  }
                  }
                  else
                  {
                    userInfo=JSON.parse(userInfo)
                    this.imgsrc=userInfo.avatar
                    this.username=userInfo.nickName
                    this.userid=userInfo.userId
                    this.openId=userInfo.openId
                  }

             // }
          },
  goToHome() {
    console.log('a')
    service.get('/prod-api/system/api/client/isSetAnswer?questionnaireId=8&openId='+this.openId).then(response => {    
            console.log(this.openId)     
            console.log(response)  

        if(response.data.isAnswered==1)
        {
          alert('已填写')
          return;
        }
        else if(response.data.subscribe==0 || response.data.subscribe=='')
        {
          alert('未关注')
          return;
        }
        else{
          this.$router.push({
      path: "/list",
      query: {
        content: JSON.stringify({ id: this.userid }),
      },
    });
        }


            }).catch(function (error) {
                console.log(error);
            });
            /*

*/

  },
  
  }
}
</script>
<style>
.changec span{

display: inline-block;

color: #ff0844;
margin: 0 5px;
font-size: 32px;
animation: changeColor 2s infinite alternate;
}
@keyframes changeColor {
0% {
 color: #ff0844;
}
50% {
  color: #fff;
}
100% {
  color: #ff0844;
}
}
.bg{
background-image: linear-gradient(to top,  #ff0844 0%,#ff0844 100%);
}
.title-info{
background-color: #fff;
border-radius: 10px;



}
.title-info ul{
display: flex;
flex-direction: column;

padding: 10px 0;
}
.title-info ul li{
list-style: none;
padding: 5px 15px;
}

</style>